<template>
	<view class="min-h-[100vh] bg-[#F5F7FA]">
		<view class="flex items-center justify-between p-[24rpx]">
			<up-avatar :src="userInfo.avatar" size="120rpx"></up-avatar>
			<view class="flex-1 ml-[20rpx]">
				<view class="leading-[60rpx] text-[36rpx] font-bold">{{ userInfo.nickName || '未登录' }}</view>
				<view class="text-[24rpx] text-gray">积分：{{ userInfo.point }}</view>
			</view>
		</view>
		<swiper class="h-[200rpx] w-full" previous-margin="60rpx" next-margin="60rpx" :circular="true" @change="swiperChange">
			<swiper-item v-for="item in memberList" :key="item.id">
				<view class="w-[95%] mx-auto p-[30rpx] border border-[#fff] rounded-[16rpx]" :style="item.style">
					<view class="flex items-center justify-between">
						<view class="text-[32rpx]">
							<text>Lv.{{ item.level }}</text>
							<text class="ml-[10rpx]">{{ item.text }}</text>
						</view>
						<view
							class="equity"
							:style="{
								borderColor: item.style?.color
							}"
							v-if="memberInfo.userLevel === item.level"
						>
							当前等级
						</view>
					</view>
					<view class="my-[20rpx]">
						<up-line-progress
							:percentage="memberInfo.point / item.totalPoint"
							:activeColor="item.style?.activeColor"
							:inactiveColor="item.style?.inactiveColor"
							height="4rpx"
							:showText="false"
						></up-line-progress>
					</view>
					<view class="flex items-center justify-between">
						<view class="flex items-center">
							<up-icon name="integral" size="28rpx" :color="item.style?.color"></up-icon>
							<text class="text-[24rpx]">{{ memberInfo.point }} / {{ item.totalPoint }}</text>
						</view>
						<view class="text-[22rpx]">升级至{{ item.text }}后额外解锁 {{ item.userEquityList.length }} 项特权</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="p-[30rpx]">
			<view class="flex items-center justify-between mb-[54rpx]">
				<view class="text-[40rpx] font-bold">会员权益({{ userEquityList.length }})</view>
			</view>
			<view class="grid grid-cols-2 gap-[20rpx]">
				<view class="flex flex-col items-center justify-center" v-for="item in userEquityList" :key="item.id">
					<up-image :src="$setBaseUrl(item.icon)" width="96rpx" height="96rpx"></up-image>
					<view class="text-[28rpx]">{{ item.title }}</view>
					<view class="text-[24rpx] text-[#636569]">{{ item.brief }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import useMember from '@/hooks/useMember';
import { onLoad } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';
const userInfo = ref({});
const userEquityList = computed(() => {
	return memberList.value[current.value]?.userEquityList || [];
});
const current = ref(0);
onLoad(() => {
	userInfo.value = uni.getStorageSync('userInfo');
	getUserMemberInfo();
});
const { getUserMemberInfo, memberInfo, memberList } = useMember();
const swiperChange = (e) => {
	current.value = e.detail.current;
};
</script>

<style scoped lang="scss">
.equity {
	@apply text-[24rpx] border border-[#000] rounded-full px-[20rpx] py-[8rpx];
}
</style>
